*{margin: 0;padding: 0;}
body{background-color: #47daa4;width: 100%;height: 100%;}
nav{margin: 200px auto;width: 960px;}
ul{text-align: center;}
nav li{list-style: none;display: inline-block;margin: 0 2em;position: relative;}
nav li a{font-family: verdana;color: rgba(0,0,0,0.4);text-decoration: none;font-size: 20px;}
span{display: block;height: 70px;width: 70px;border-radius: 50%;background-color: #fff;position: relative;bottom: 100%;left: 50%;margin: 0 0 30px -40px;position: absolute;}
/*span:after{content: "";display: block;background-image: url(../images/tooltip.png);position: absolute;top: 100%;left: 50%;background-repeat: no-repeat;background-color: red;}*/
span img{position: absolute;top:100%;left: 50%;height: 14px;width: 14px;margin-left: -7px;margin-top: -2px;}
span i{
		margin-top: 25px;
		color: #47daa4;
		font-size: 20px;
}
ul li:hover a{color: #fff;transition: color .5s;-webkit-transition: color .5s;-moz-transition: color .5s;}
.tooltip-content{transform-origin: center bottom;
	-webkit-transform-origin: center bottom;
	-moz-transform-origin: center bottom;
	opacity: 0;
	transition: all .5s;
	-webkit-transition: all .5s;
	-moz-transition: all .5s;}
.tooltip-one{
	transform: translate3d(0,10px,0) rotate3d(1,1,1,45deg);
	-ms-transform: translate3d(0,10px,0) rotate3d(1,1,1,45deg);	/* IE 9 */
	-webkit-transform: translate3d(0,10px,0) rotate3d(1,1,1,45deg);	/* Safari and Chrome */
	-o-transform: translate3d(0,10px,0) rotate3d(1,1,1,45deg);	/* Opera */
	-moz-transform: translate3d(0,10px,0) rotate3d(1,1,1,45deg);	/* Firefox */
}
.tooltip-one i,.tooltip-three i{transform: scale3d(0,0,1);-webkit-transform: scale3d(0,0,1);-moz-transform: scale3d(0,0,1);transition: transform .5s;-webkit-transition: transform .5s;-moz-transition: transform .5s;}
.tooltip-two{
	transform: translate(0,15px);
	-webkit-transform: translate(0,15px);
	-moz-transform: translate(0,15px);
}
.tooltip-two i{transform: translate(0,7px);-webkit-transform: translate(0,7px);-moz-transform: translate(0,7px);
	transition: transform .5s;
	transition: -webkit-transform .5s;
	transition: -moz-transform .5s;
}
.tooltip-three i{transition: transform .5s;-webkit-transition: -webkit-transform .5s;-moz-transition: -moz-transform .5s;}
.tooltip-three{transform: translate3d(0,10px,0) rotate3d(0,1,0,90deg);-webkit-transform: translate3d(0,10px,0) rotate3d(0,1,0,90deg);-moz-transform: translate3d(0,10px,0) rotate3d(0,1,0,90deg);
	transform-origin: 50% 100%;
	-webkit-transform-origin: 50% 100%;
	-moz-transform-origin: 50% 100%;
}
.tooltip-four{
	transform: translate3d(0,-20px,0);
	-webkit-transform: translate3d(0,-20px,0);
	-moz-transform: translate3d(0,-20px,0);
}
.tooltip-four i{
	transform: translate3d(0,20px,0);
	-webkit-transform: translate3d(0,20px,0);
	-moz-transform: translate3d(0,20px,0);
	transition: transform .5s;
	-webkit-transition: -webkit-transform .5s;
	-moz-transition: -moz-transform .5s;
}
.tooltip-five{
	transform: scale3d(0,0,1);
	-webkit-transform: scale3d(0,0,1);
	-moz-transform: scale3d(0,0,1);
}
.tooltip-five i{
	transform: translate3d(0,20px,0);
	-webkit-transform: translate3d(0,20px,0);
	-moz-transform: translate3d(0,20px,0);
	transition: transform .5s;
	-webkit-transition: -webkit-transform .5s;
	-moz-transition: -moz-transform .5s;
}
ul li:hover .tooltip-content,ul li:hover .tooltip-content i{
	transform: translate3d(0,0,0);
	-webkit-transform: translate3d(0,0,0);
	-moz-transform: translate3d(0,0,0);
	transform: rotate3d(0,0,0,0);
	-webkit-transform: rotate3d(0,0,0,0);
	-moz-transform: rotate3d(0,0,0,0);
	transform: scale3d(1,1,1);
	-webkit-transform: scale3d(1,1,1);
	-moz-transform: scale3d(1,1,1);
	opacity: 1;
}
/*ul li:hover .tooltip-four i{
	transform: translate3d(0,20px,0);
	-webkit-transform: translate3d(0,20px,0);
	-moz-transform: translate3d(0,20px,0);
}*/
